import React from 'react'
import './index.less'
import http from 'libs/http'
import md5 from 'md5'
import { Dialog } from 'components'

export default class extends React.Component {
  state ={
    activeTab: 1,
    password: '',
    passwordAgain: '',
    passwordErr: '',
    passwordAgainErr: '',
    handleDisable: true,
    oldPassword: '',
    newPassword: '',
    newPasswordAgain: '',
    oldPasswordErr: '',
    newPasswordErr: '',
    newPasswordAgainErr: '',
  }
  checkPassword = value => {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,30}$/
    return reg.test(value)
  }

  /* 密码设置 */
  changeInput = type => e => {
    const value = e.target.value
    if(!value || !this.checkPassword(value)) {
      this.setState({ 
        [type]: value,
      })
    }else {
      this.setState({
        [type]: value,
        [type+'Err']: '',
      })
    }
  }
  onBlur = type => e => {
    if(type === 'newPassword') {
      const newPassword = e.target.value
      const { oldPassword } = this.state;
      if(!newPassword) {
        this.setState({
          newPassword,
          [type+'Err']: '密码不能为空',
        })
      }else if(!this.checkPassword(newPassword)) {
        this.setState({
          newPassword,
          [type+'Err']: '请输入6-30位字母和数字的组合',
        })
      }else if(newPassword == oldPassword) {
        this.setState({
          newPassword,
          [type+'Err']: '新密码不能与旧密码重复',
        })
      }else {
        this.setState({
          newPassword,
          [type+'Err']: ''
        })
      }
    }else if(type === 'newPasswordAgain') {
      const newPasswordAgain = e.target.value
      const { newPassword } = this.state
      const flag = newPasswordAgain !== newPassword
      if(!this.checkPassword(newPasswordAgain)){
        this.setState({
          newPasswordAgain,
          newPasswordAgainErr: '请输入6-30位字母和数字的组合',
        })
      }else{
        this.setState({
          newPasswordAgain,
          newPasswordAgainErr: flag ? '两次密码输入不一致' : '',
        })
      }
    }
    else if(type === 'oldPassword') {
      const oldPassword = e.target.value
      this.setState({
        oldPassword,
        oldPasswordErr: oldPassword ? '' : '密码不能为空'
      })
    }
  }

  handleSubmit = () => {
    const { oldPassword, newPassword, newPasswordAgain } = this.state
    if(oldPassword && oldPassword != newPassword && newPassword && newPasswordAgain && newPassword === newPasswordAgain) {
      http.post(
        '/student/info/modifyPassword', 
        { oldPassword: md5(oldPassword), password: md5(newPassword), passwordAgain: md5(newPasswordAgain) },
        undefined,
        false
      ).then(res => {
        Dialog({
          message: '修改成功'
        })
        this.setState({
          oldPassword: '',
          newPassword: '',
          newPasswordAgain: ''
        })
      }).catch(err => {
        if(err.code == 2){
          this.setState({
            oldPasswordErr: err.msg
          })
        }
      })
    }else{
      if(!oldPassword){
        this.setState({
          oldPasswordErr: '请输入旧密码'
        })
      }
      if(!newPassword){
        this.setState({
          newPasswordErr: '请输入新密码'
        })
      }
      if(!newPasswordAgain){
        this.setState({
          newPasswordAgainErr: '请再次输入新密码'
        })
      }
    }
  }

  render() {
    const { activeTab, password, passwordErr, passwordAgain, passwordAgainErr, handleDisable,
      oldPassword, newPassword, newPasswordAgain, oldPasswordErr, newPasswordErr, newPasswordAgainErr,
    } = this.state
    return (
      <div className="edit-password">
        <div className="password-tab">
          <span className="active">修改密码</span>
        </div>
        <div className="password-wrap">
          <div className={`password-item ${oldPasswordErr ? 'err' : ''}`}>
            <label>输入旧密码</label>
            <input 
              type="password" 
              placeholder="请输入旧密码（必填项）" 
              onChange={this.changeInput('oldPassword')}
              onBlur={this.onBlur('oldPassword')}
              value={oldPassword}  
            />
            <span>{oldPasswordErr}</span>
          </div>
          <div className={`password-item ${newPasswordErr ? 'err' : ''}`}>
            <label>输入新密码</label>
            <input 
              type="password" 
              placeholder="请输入新密码（必填项）" 
              onChange={this.changeInput('newPassword')}
              onBlur={this.onBlur('newPassword')}
              value={newPassword}  
            />
            <span>{newPasswordErr}</span>
          </div>
          <div className={`password-item ${newPasswordAgainErr ? 'err' : ''}`}>
            <label>确认新密码</label>
            <input 
              type="password" 
              placeholder="请再次输入新密码（必填项）" 
              onChange={this.changeInput('newPasswordAgain')}
              onBlur={this.onBlur('newPasswordAgain')}
              value={newPasswordAgain}  
            />
            <span>{newPasswordAgainErr}</span>
          </div>
        </div>
        <div className="btn-wrap">
          <span onClick={this.handleSubmit}>确认</span>
          <span>取消</span>
        </div>
      </div>
    )
  }
}